<template>
  <el-upload
    class="upload-media"
    :action="fileUploadUrl"
    :data="fileUploadData"
    :show-file-list="false"
    :accept="accept"
    :limit="limitUploadNum"
    multiple
    :on-exceed="onExceed"
    :before-upload="beforeUpload"
    :on-progress="onProgress"
    :on-success="onSuccess">
    <div class="btn-upload"><i class="jy-icon-upload"></i><span class="font-14">{{item.uploadTxt}}</span></div>
  </el-upload>
</template>

<script setup lang="ts">
import { fileUploadUrl } from '@/service/web/api'
import { getValueFromXml, randomUploadFileName } from '@/utils'
import { MEDIAS } from '@/const/web/'
import { useWebSiteStore } from '@/store/web/site'
import { showToast } from '@/views/ts/'
import { useWebMediaStore } from '@/store/web/media'
import { useWebUploadStore } from '@/store/web/upload'
import { defineEmits } from 'vue'
const emits = defineEmits(['change'])
const props = defineProps<{ 
  item: IWebMediaTip,
}>()
const accept = ref('')
const limitUploadNum = ref(100)
const state =  {
  extentions: '',
  reg: new RegExp(''),
  type: 1,
  fileList: [],
  size: 1
}
const useWebSite = useWebSiteStore()
const useWebMedia = useWebMediaStore()
const useWebUpload = useWebUploadStore()
let fileUploadData_: any
const fileUploadData: any = computed(() => {
  fileUploadData_ = _.cloneDeep(useWebUpload.fileUploadData)
  return fileUploadData_
})
watch(()=> props.item.uploadTxt, (newVal,oldVal)=>{
  refreshUploadFileType()
})
const refreshUploadFileType = () => {
  if(useWebSite.siteStatus.isUploadFile) {
    accept.value = "*"
    state.extentions = "*"
    state.size = 1024 * 1024 * 15
  }else if(props.item.type == MEDIAS.image.type) {
    state.size = 1024 * 1024 * _.parseInt(useWebSite.siteStatus.uploadImgSize)
    accept.value = "image/png,image/gif,image/jpeg,image/webp"
    state.extentions = "gif,jpg,jpeg,png,webp"
    //@ts-ignore
    state.reg = new RegExp(!/\.(jpeg|jpe|jpg|gif|png|webp)$/i)
  }else if(props.item.type == MEDIAS.audio.type) {
    state.size = 1024 * 1024 * 5
    accept.value = "audio/mp3,audio/mpeg"
    state.extentions = "mp3"
    //@ts-ignore
    state.reg = new RegExp(!/\.(mp3)$/i)
  }else if(props.item.type == MEDIAS.video.type) {
    state.size = 1024 * 1024 * 15
    accept.value = "audio/mp4,video/mp4"
    state.extentions = "mp4"
    //@ts-ignore
    state.reg = new RegExp(!/\.(mp4)$/i)
  }
}
const onExceed = (files: any[], fileList: any[]) => {
  showToast(`当前限制选择 ${limitUploadNum.value} 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`)
}
const beforeUpload = (file: any) => {
  let isJPG = false
  if(useWebSite.siteStatus.isUploadFile) {
    isJPG = true;
  }else if(props.item.type == MEDIAS.image.type) {
    if(file.type === 'image/png' || file.type === 'image/gif' || file.type === 'image/jpeg'){
      isJPG = true
    }
    state.size = 1024 * 1024 * _.parseInt(useWebSite.siteStatus.uploadImgSize)
  }else if(props.item.type == MEDIAS.audio.type) {
    if(file.type === 'audio/mpeg' || file.type === 'audio/mp3') {
      isJPG = true
    }
    state.size = 1024 * 1024 * _.parseInt(useWebSite.siteStatus.uploadImgSize);
    accept.value = "audio/mp3,audio/mpeg"
    state.extentions = "mp3"
    //@ts-ignore
    state.reg = new RegExp(!/\.(mp3)$/i);
  }else if(props.item.type == MEDIAS.video.type){
    if(file.type === 'audio/mp4' || file.type === 'video/mp4'){
      isJPG = true
    }
    state.size = 1024 * 1024 * 15 * _.parseInt(useWebSite.siteStatus.uploadImgSize);
    accept.value = "audio/mp4,video/mp4"
    //@ts-ignore
    state.reg = new RegExp(!/\.(mp4)$/i)
  }

  const isLt2M = file.size > state.size

  if (!isJPG) {
    showToast('上传文件格式不对!')
    return false;
  }
  if (isLt2M) {
    showToast(`上传文件大小不能超过 ${state.size/1024/1024}M !`)
    return false
  }
  if(useWebSite.siteStatus.isUploadFile) {
    fileUploadData_.key = useWebUpload.fileUploadData.key + file.name
  } else {
    let suffix = file.name.split(".")[1]
    fileUploadData_.key = useWebUpload.fileUploadData.key + randomUploadFileName(useWebSite.id) + "." + suffix
  }
  let item: any
  if(props.item.type == MEDIAS.image.type) {
    item = { loading: true, name: file.name }
  }else if(props.item.type == MEDIAS.audio.type) {
    item = { loading: true, name: file.name }
  }else if(props.item.type == MEDIAS.video.type) {
    item = { loading: true, name: file.name }
  }
  if(!useWebSite.siteStatus.isUploadFile && item && !isLt2M) {
    useWebMedia.addMediaItem({item, type: _.parseInt(props.item.type)})
  }
  return isJPG && !isLt2M
}
const onProgress = (event: any, file: any, fileList: any[]) => {
  console.log(event, file, fileList)
}
const onSuccess = (response: any, file: any) => {
  let url = getValueFromXml(response)
  url = _.replace(url, 'http', 'https')
  url = _.replace(url, 'file', 'static')
  url = _.replace(url, '.s3.sinaapp.com', '')
  if(useWebSite.siteStatus.isUploadFile) {
    console.log(url)
  } else {
    const data: IFileUploadItem = {
      "url": url,
      "name": file.name,
      "type": props.item.type,//分类,暂时默认1,用处待定
      "suffix": file.raw.type,//后缀
      "size": file.size,//大小
      "site_id": useWebSite.id,//站点名称
    }
    if(props.item.isIcon) {
      emits('change', data)
    }
    useWebUpload.saveImgUpload(data)
  }
}

const initComp = () => {
  refreshUploadFileType()
}
initComp()
</script>
